<template>
  <div class="rightCon">
    <div v-show="firstStep">
      <el-form ref="msgReset"  :model="loginInfo" :rules="loginRules" class="">
        <el-form-item prop="phoneUser">
          <el-input ref='forgetPhone' type="tel" placeholder="" maxLength="11" auto-complete="off"
            v-model.trim="loginInfo.phoneUser"></el-input>
          <span class="input-placeholder" @click="getFocus('forgetPhone')" v-if="!loginInfo.phoneUser">填写手机号</span>
        </el-form-item>
        <transition name="fade">
          <el-form-item prop="codeUser1" class="verifyCode" v-show="checkPhone">
            <el-input ref='forgetCode1' class="msgcode" maxLength="5" v-model.trim="loginInfo.codeUser1"  placeholder=""></el-input>
            <el-tooltip class="item" effect="light" content="点击切换" placement="top-end">
              <div class="randomCode" style="padding: 0;border: none"> <div id="v_container1" style="width: 97px;height: 38px;margin: 0 auto;"></div></div>
            </el-tooltip>
            <span class="input-placeholder" @click="getFocus('forgetCode1')" v-if="!loginInfo.codeUser1">请输入右边验证码信息</span>
          </el-form-item>
        </transition>
        <el-form-item prop="codeUser" class="sendmsg">
          <el-input ref='forgetCode2' class="msgcode" maxLength="6" v-model.trim="loginInfo.codeUser"  placeholder=""></el-input>
          <el-button class="sendBtn" @click="codeMsg('')" :disabled="ableCode">{{fontTime}}</el-button>
          <span class="input-placeholder" @click="getFocus('forgetCode2')" v-if="!loginInfo.codeUser">短信验证码</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="nextStep(loginInfo.codeUser)" :disabled="ableLogin">下一步</el-button>
      </span>
    </div>
    <div v-show="!firstStep">
      <el-form ref="surePwd"  :model="loginInfo" :rules="loginRules" class="" >
        <el-form-item prop="passWord">
          <el-input ref='forgetpwd1' :type="eye? 'text':'password'" maxLength="20"  v-model.trim="loginInfo.passWord"  placeholder=""></el-input>
          <div class="strength" style="display: none">
            <div class="strengthA"></div>
            <div class="strengthB"></div>
            <div class="strengthC"></div>
          </div>
          <span class="input-placeholder" @click="getFocus('forgetpwd1')" v-if="!loginInfo.passWord">输入新密码</span>
        </el-form-item>
        <el-form-item prop="passWordNew">
          <el-input ref='forgetpwd2' :type="eye? 'text':'password'" maxLength="20"  v-model.trim="loginInfo.passWordNew"  placeholder=""></el-input>
          <i :class="eye? 'icon-mimakeshi_y':'icon-mimakeshi_n'" @click="look()"></i>
          <span class="input-placeholder" @click="getFocus('forgetpwd2')" v-if="!loginInfo.passWordNew">确认新密码</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogShow('surePwd')">完成</el-button>
      </span>
    </div>
  </div>

</template>

<script>
  import Verify from 'plus/getVerify'
  import mixins from 'plus/mixin'
  import * as opreate from 'api/getData'
  import { mapActions } from 'vuex'


  export default {
      name: "forget-pwd",
      mixins: [mixins.mixin],
      data(){
          return{
            firstStep:true,
            checkPhone:false,
            codeUser1:"",
            fontTime:'发送验证码',
            ableLogin:true,
            times:'60',
            ableCode:true,
            eye:false
          }
      },
      deactivated(){
      },
      activated(){
      },
      mounted(){
        this.codeUser1 = new Verify({id:'v_container1',canvasId:'verifyID1'})
      },
      props:['dialogVisibleForgot'],
      methods:{
        ...mapActions([
          'setDialogClose'
        ]),
        look(){
          this.eye = !this.eye
        },
        nextStep(code){
          this.loginMsg = ''
          this.$refs['msgReset'].validate((valid) => {
            if (valid) {
              this.codeMsg(code)
            } else {
              return false;
            }
          })
        },
        codeMsg(code){
          this.loginMsg = ''
          this.$refs['msgReset'].validateField("phoneUser",(v)=>{
            if(v == ''){
              this.$refs['msgReset'].validateField("codeUser1",(c) => {
                if(c == ''){
                  opreate.forgotPwd(this.loginInfo.phoneUser,code).then(res =>{
                    if(res.user){
                      this.firstStep = false
                    }else {
                      this.loginMsg = res.message
                      if(res.code == '50001'){
                        this.$refs['msgReset'].validateField("phoneUser")
                      }else if(!res.code){
                        if(code == '' && this.loginInfo.phoneUser !== ''){
                          this.times = 60
                          this.ableCode = true
                          let time1 = setInterval( () =>{
                            if(this.times <= 0){
                              clearInterval(time1)
                              this.ableCode = false
                              this.fontTime = '发送验证码'
                            }else {
                              this.times--
                              this.fontTime = '已发送('+ this.times + ')'
                            }
                          },1000)
                        }
                      }else if(res.code == '1'){
                        this.loginMsg = res.data.Exception
                        this.$refs['msgReset'].validateField("codeUser")
                      }else {
                        this.$refs['msgReset'].validateField("codeUser")
                      }
                    }
                  })
                }
              })
            }
          })
        },
        dialogShow1(){
          if(this.loginInfo.passWord !== this.loginInfo.passWordNew){
            this.loginMsg = '请保持密码一致！'
            this.$refs['surePwd'].validateField("passWordNew")
          }else {
            opreate.updatePwd(this.loginInfo.phoneUser,this.loginInfo.passWord).then(res => {
              this.setDialogClose(false)
              // this.$emit("update:dialogVisibleForgot",false)
              for (let i in this.$refs){
                if(this.$refs[i]['resetFields']){
                  this.$refs[i].resetFields()
                }
              }
            })
          }
        },
        getFocus(el){
          this.$refs[el].focus()
        }
      }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .fade-enter-active, .fade-leave-active {
    transition: all 1s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
    transform: translateY(-40px);
  }
  .el-button
    padding 12px 0px
    border none
.input-placeholder{
  position absolute
  left 0
  top 0
  color rgba(118,118,118,1)
}
</style>
